<template>
	<view class="share-page">
		<scroll-view scroll-y class="content" :show-scrollbar="false">
			<view class="doc-content">
				<text class="doc-text">{{ readmeContent }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			readmeContent: `# 海D捞 - 电商小程序项目文档

## 📋 项目简介

海D捞是一个基于 uni-app 和 Spring Boot 开发的电商小程序项目，提供商品浏览、购物车、订单管理、社区互动、会员系统等完整的电商功能。

### 主要特性

- 🛒 商品管理：10大分类，30+商品展示
- 🛍️ 购物功能：购物车、订单管理、优惠券系统
- 👥 用户系统：用户注册登录、个人中心、会员等级
- 💬 社区功能：发帖、评论、点赞、收藏
- 🎁 会员系统：四级会员体系（青铜/白银/黄金/黑金）
- 📱 移动端优化：专为小程序设计的UI界面

---

## 🛠️ 技术栈

### 后端技术

- 框架：Spring Boot 3.0.2
- ORM：MyBatis-Plus 3.5.6
- 数据库：MySQL 8.3.0
- 认证：JWT (jjwt 0.11.5)
- Java版本：JDK 17
- 构建工具：Maven

### 前端技术

- 框架：uni-app (Vue.js)
- UI风格：淡蓝色主题设计
- 图标库：阿里云矢量图标库
- 状态管理：Vuex (可选)
- HTTP请求：uni.request

### 开发工具

- IDE：IntelliJ IDEA / VS Code
- 数据库管理：MySQL Workbench / Navicat
- API测试：Postman / Apifox

---

## 📁 项目结构

HaiDLao/
├── HaiDLao-backend/              # 后端项目
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/example/HaiDLaobackend/
│   │   │   │       ├── common/          # 通用类（ApiResponse, JwtUtil）
│   │   │   │       ├── config/          # 配置类（WebConfig, AuthInterceptor）
│   │   │   │       ├── controller/       # REST控制器（14个）
│   │   │   │       ├── entity/          # 实体类（20个）
│   │   │   │       ├── mapper/          # MyBatis Mapper（20个）
│   │   │   │       └── service/         # 业务逻辑层（40个）
│   │   │   └── resources/
│   │   │       ├── application.properties    # 应用配置
│   │   │       ├── init.sql                  # 数据库初始化脚本
│   │   │       └── README_PRODUCT_IMAGES.md  # 商品图片说明
│   │   └── test/                    # 测试代码
│   ├── pom.xml                     # Maven配置
│   └── uploads/                    # 文件上传目录
│       ├── products/               # 商品图片
│       ├── posts/                   # 帖子图片
│       └── users/                   # 用户头像
│
├── HaiDLao-frontend/               # 前端项目
│   ├── pages/                      # 页面目录
│   │   ├── index/                  # 首页
│   │   ├── category/               # 分类页
│   │   ├── product/                # 商品详情
│   │   ├── cart/                   # 购物车
│   │   ├── order/                  # 订单管理
│   │   ├── community/              # 社区功能
│   │   ├── member/                 # 会员中心
│   │   ├── profile/                # 个人中心
│   │   └── ...                     # 其他页面
│   ├── static/                     # 静态资源
│   │   ├── assets/icons/           # 图标文件
│   │   └── logo.png               # Logo
│   ├── utils/                      # 工具类
│   │   ├── request.js             # HTTP请求封装
│   │   └── server.js              # 服务器配置
│   ├── pages.json                  # 页面配置
│   ├── manifest.json               # 应用配置
│   └── package.json                # 依赖配置
│
└── README.md                       # 项目文档（本文件）

---

## 🎯 功能模块

### 1. 用户模块

功能列表：
- ✅ 用户注册/登录
- ✅ JWT Token认证
- ✅ 个人资料管理
- ✅ 头像上传
- ✅ 手机号绑定

API接口：
POST   /api/users/register          # 用户注册
POST   /api/users/login             # 用户登录
GET    /api/users/profile           # 获取用户信息
PUT    /api/users/profile           # 更新用户信息
POST   /api/users/avatar/upload     # 上传头像

---

### 2. 商品模块

功能列表：
- ✅ 商品分类（10大类：日用、百货、食品、医药、服装、生鲜、数码、饰品、家具、娱乐）
- ✅ 商品列表展示
- ✅ 商品详情页
- ✅ 商品搜索
- ✅ 商品收藏
- ✅ 商品评价

API接口：
GET    /api/categories              # 获取分类列表
GET    /api/products                # 获取商品列表（支持分页、搜索）
GET    /api/products/{id}           # 获取商品详情
GET    /api/products/recommend      # 智能推荐（随机算法）
POST   /api/products/{id}/upload    # 上传商品图片
GET    /api/products/{id}/reviews   # 获取商品评价

---

### 3. 购物车模块

功能列表：
- ✅ 添加商品到购物车
- ✅ 购物车列表
- ✅ 修改商品数量
- ✅ 删除商品
- ✅ 批量结算

API接口：
GET    /api/cart/list               # 获取购物车列表
POST   /api/cart/add                # 添加商品
POST   /api/cart/update             # 更新数量
POST   /api/cart/remove             # 删除商品

---

### 4. 订单模块

功能列表：
- ✅ 创建订单（支持优惠券）
- ✅ 订单列表（按状态筛选）
- ✅ 订单详情
- ✅ 订单支付
- ✅ 订单确认收货
- ✅ 订单退款申请

API接口：
POST   /api/orders/checkout         # 购物车结算
POST   /api/orders/checkoutSelected # 选中商品结算（支持优惠券）
GET    /api/orders                  # 获取订单列表
POST   /api/orders/{id}/pay         # 支付订单
POST   /api/orders/{id}/confirm     # 确认收货

订单状态：
- CREATED - 已创建
- PAID - 已支付
- SHIPPED - 已发货
- COMPLETED - 已完成
- CANCELED - 已取消

---

### 5. 优惠券模块

功能列表：
- ✅ 优惠券列表
- ✅ 每日签到领取优惠券
- ✅ 订单使用优惠券
- ✅ 会员等级专属优惠券

API接口：
GET    /api/users/coupons           # 获取用户优惠券
GET    /api/coupons/available       # 获取可用优惠券（支持订单金额筛选）
POST   /api/coupons/checkin         # 每日签到

---

### 6. 社区模块

功能列表：
- ✅ 发布帖子（支持图片上传）
- ✅ 帖子列表（两列布局）
- ✅ 帖子详情
- ✅ 帖子点赞/取消点赞
- ✅ 帖子收藏/取消收藏
- ✅ 评论功能（支持嵌套回复）
- ✅ 评论点赞
- ✅ 帖子收藏列表
- ✅ 违禁词过滤

API接口：
GET    /api/posts                   # 获取帖子列表
GET    /api/posts/{id}               # 获取帖子详情
POST   /api/posts                    # 创建帖子
POST   /api/posts/upload             # 上传帖子图片
POST   /api/posts/{id}/like         # 点赞/取消点赞
POST   /api/posts/{id}/favorite     # 收藏/取消收藏
GET    /api/posts/{id}/comments      # 获取评论列表
POST   /api/posts/{id}/comments     # 创建评论
POST   /api/posts/{id}/comments/{commentId}/like  # 评论点赞
GET    /api/posts/favorites          # 获取收藏的帖子

---

### 7. 会员模块

功能列表：
- ✅ 会员等级系统（NONE/BRONZE/SILVER/GOLD/PLATINUM）
- ✅ 一键加入会员
- ✅ 会员专属优惠券
- ✅ 会员权益展示
- ✅ 等级专属优惠券领取

API接口：
GET    /api/member/info             # 获取会员信息
POST   /api/member/join             # 加入会员
POST   /api/member/coupon/claim     # 领取会员等级优惠券

会员等级：
- NONE - 非会员（默认）
- BRONZE - 青铜会员（默认加入等级）
- SILVER - 白银会员
- GOLD - 黄金会员
- PLATINUM - 黑金会员

---

### 8. 地址模块

功能列表：
- ✅ 收货地址列表
- ✅ 添加/编辑地址
- ✅ 设置默认地址
- ✅ 选择收货地址

API接口：
GET    /api/user/addresses         # 获取地址列表
POST   /api/user/addresses         # 创建地址
PUT    /api/user/addresses/{id}    # 更新地址
POST   /api/user/addresses/{id}/default  # 设置默认地址

---

### 9. 退款模块

功能列表：
- ✅ 申请退款
- ✅ 退款列表
- ✅ 退款详情
- ✅ 删除退款申请

API接口：
GET    /api/refunds                # 获取退款列表
GET    /api/refunds/{id}           # 获取退款详情
POST   /api/refunds                # 申请退款
DELETE /api/refunds/{id}           # 删除退款申请

---

### 10. 评价模块

功能列表：
- ✅ 商品评价
- ✅ 评价列表
- ✅ 评价图片上传

API接口：
GET    /api/products/{id}/reviews  # 获取商品评价
POST   /api/reviews                 # 创建评价

---

## 🗄️ 数据库设计

### 核心表结构

用户相关：
- user - 用户表（包含会员等级）
- user_address - 收货地址表
- user_coupon - 用户优惠券表
- user_favorite - 商品收藏表
- user_member_coupon - 用户会员优惠券领取记录

商品相关：
- category - 分类表
- product - 商品表
- product_review - 商品评价表

订单相关：
- order - 订单表（包含原价、优惠金额）
- order_item - 订单项表
- refund_request - 退款申请表

购物车：
- cart_item - 购物车项表

优惠券：
- coupon - 优惠券表
- member_level_coupon - 会员等级优惠券关联表

社区：
- post - 帖子表
- post_like - 帖子点赞表
- post_favorite - 帖子收藏表
- post_comment - 帖子评论表
- comment_like - 评论点赞表

其他：
- banner - Banner轮播图表

### 数据库初始化

执行 HaiDLao-backend/src/main/resources/init.sql 文件即可完成数据库初始化，包括：
- 表结构创建
- 初始数据插入（10大分类、30个商品、会员优惠券等）

---

## 🔌 API接口文档

### 基础信息

- Base URL: http://localhost:8080
- 认证方式: JWT Bearer Token
- 请求格式: JSON
- 响应格式: JSON

### 统一响应格式

{
  "code": 0,           // 0表示成功，其他表示错误码
  "message": "success", // 提示信息
  "data": {}           // 数据内容
}

---

## 🚀 快速开始

### 环境要求

- JDK: 17+
- Maven: 3.6+
- MySQL: 8.0+
- Node.js: 14+ (前端开发)
- HBuilderX 或 VS Code (前端开发)

### 后端部署

1. 克隆项目
git clone <repository-url>
cd HaiDLao/HaiDLao-backend

2. 配置数据库
   - 创建数据库：CREATE DATABASE haidlao CHARACTER SET utf8mb4;
   - 修改 src/main/resources/application.properties 中的数据库配置

3. 初始化数据库
   - 执行 src/main/resources/init.sql 脚本

4. 运行项目
mvn spring-boot:run

5. 访问接口
   - API地址：http://localhost:8080
   - 静态资源：http://localhost:8080/uploads/**

### 前端部署

1. 安装依赖
cd HaiDLao-frontend
npm install

2. 配置服务器地址
   - 修改 utils/server.js 中的 BASE_URL

3. 运行开发服务器
   # HBuilderX 中运行到微信小程序
   # 或使用 uni-app CLI
   npm run dev:mp-weixin

4. 构建生产版本
npm run build:mp-weixin

---

## 📱 页面说明

### TabBar 页面

1. 主页 (pages/index/index.vue)
   - 首页轮播图
   - 快捷导航（8个功能入口）
   - 推荐商品列表

2. 分类 (pages/category/index.vue)
   - 10大分类展示
   - 分类商品列表

3. 社区 (pages/community/index.vue)
   - 帖子列表（两列布局）
   - 发帖按钮（底部居中）

4. 购物车 (pages/cart/index.vue)
   - 购物车商品列表
   - 结算功能

5. 我的 (pages/profile/index.vue)
   - 用户信息
   - 订单管理入口
   - 功能服务入口

### 主要功能页面

- 商品详情 (pages/product/detail.vue) - 商品信息、评价、收藏
- 订单管理 (pages/order/index.vue) - 订单列表、状态筛选
- 订单确认 (pages/order/confirm.vue) - 选择地址、优惠券、支付
- 帖子详情 (pages/community/detail.vue) - 帖子内容、评论、点赞
- 会员中心 (pages/member/index.vue) - 会员等级、权益、优惠券
- 智能推荐 (pages/recommend/index.vue) - 随机推荐商品
- 帖子收藏 (pages/post-favorite/index.vue) - 收藏的帖子列表

---

## 🎨 UI设计规范

### 颜色主题

- 主背景色: #F0F7FF (淡蓝色)
- 主色调: #5B9BD5 (蓝色)
- 深蓝色: #2C5F8D
- 中蓝色: #4A6FA5
- 浅蓝色: #8FA8C4
- 浅色背景: #E8F2FF

### 图标规范

- 图标位置: static/assets/icons/
- 命名规则: 
  - 普通状态：{name}.png
  - 激活状态：{name}_fill.png
- 图标来源: 阿里云矢量图标库

### 页面布局

- 卡片圆角: 16-24rpx
- 间距规范: 20-32rpx
- 字体大小: 24-36rpx
- 阴影效果: 使用蓝色系阴影

---

## 📂 文件上传说明

### 上传目录结构

uploads/
├── products/          # 商品图片
│   └── {productId}/
│       ├── 1.jpg
│       └── 2.jpg
├── posts/              # 帖子图片
│   └── {uuid}.jpg
└── users/              # 用户头像
    └── {userId}/
        └── avatar/
            └── {uuid}.jpg

### 上传接口

- 帖子图片: POST /api/posts/upload
- 商品图片: POST /api/products/{productId}/upload
- 用户头像: POST /api/users/avatar/upload

### 访问路径

所有上传的文件通过 /uploads/** 路径访问。

---

## 🔐 认证机制

### JWT Token

- Token存储: 前端使用 uni.setStorageSync('token', token) 存储
- Token传递: 请求头中携带 Authorization: Bearer {token}
- Token验证: AuthInterceptor 拦截器自动验证

### 受保护的接口

大部分业务接口需要登录，以下接口无需认证：
- /api/users/register
- /api/users/login
- /api/categories
- /api/products/**
- /api/posts (GET)
- /api/posts/{id} (GET)
- /api/banners
- /uploads/**

---

## 🛡️ 安全特性

### 违禁词过滤

帖子发布时进行违禁词检测：
- 检测关键词列表
- 匹配到关键词则拒绝发布并提示
- 未匹配则正常保存

### 数据验证

- 后端使用 @Valid 注解进行参数验证
- 前端进行基础格式验证
- SQL注入防护（MyBatis-Plus参数化查询）

---

## 📊 数据库字段说明

### 订单表重要字段

- original_amount - 订单原价
- total_amount - 实付金额
- discount_amount - 优惠金额
- coupon_id - 使用的优惠券ID

### 用户表重要字段

- member_level - 会员等级（NONE/BRONZE/SILVER/GOLD/PLATINUM）
- avatar_url - 头像URL（相对路径）

---

## 🔧 开发指南

### 后端开发

1. 添加新接口
   - 在对应的 Controller 中添加方法
   - 使用 @RequestAttribute("currentUserId") 获取当前用户ID
   - 返回 ApiResponse 统一格式

2. 添加新实体
   - 创建 Entity 类，使用 @TableName 指定表名
   - 创建 Mapper 接口，继承 BaseMapper<Entity>
   - 创建 Service 接口和实现类

3. 文件上传
   - 使用 MultipartFile 接收文件
   - 保存到 uploads/ 目录对应子目录
   - 返回相对路径

### 前端开发

1. 添加新页面
   - 在 pages/ 目录下创建 .vue 文件
   - 在 pages.json 中注册页面
   - 使用 uni.navigateTo 或 uni.switchTab 导航

2. API调用
   - 在 utils/request.js 中添加API方法
   - 在页面中导入 api 对象调用

3. 样式规范
   - 使用淡蓝色主题
   - 遵循卡片式布局
   - 保持统一的间距和圆角

---

## 📝 注意事项

### 数据库

- 执行 init.sql 前请备份现有数据
- 脚本使用 IF NOT EXISTS 和 FROM DUAL WHERE NOT EXISTS 保证幂等性
- 可以安全地重复执行

### 文件上传

- 确保 uploads/ 目录有写入权限
- 商品图片需要按照 {productId}/1.jpg 和 {productId}/2.jpg 命名
- 上传的文件会自动生成UUID文件名

### 会员系统

- 默认加入会员等级为 BRONZE（青铜）
- 会员等级优惠券每个等级只能领取一次
- 只有达到对应等级才能领取该等级的优惠券

### 优惠券使用

- 订单创建时使用优惠券，确保原子性（@Transactional）
- 优惠券使用后状态更新为已使用
- 订单记录原价和优惠金额

---

## 🐛 常见问题

### 1. 数据库连接失败
- 检查 application.properties 中的数据库配置
- 确认MySQL服务已启动
- 检查数据库用户权限

### 2. 文件上传失败
- 检查 uploads/ 目录权限
- 确认文件大小不超过10MB
- 检查磁盘空间

### 3. Token验证失败
- 确认Token未过期
- 检查请求头格式：Authorization: Bearer {token}
- 重新登录获取新Token

### 4. 图标不显示
- 确认图标文件已放入 static/assets/icons/ 目录
- 检查文件名是否正确（包括 _fill 后缀）
- 清除缓存重新编译

---

## 📄 许可证

本项目仅供学习和开发使用。

---

## 👥 贡献

欢迎提交 Issue 和 Pull Request！

---

## 📞 联系方式

如有问题，请通过 Issue 反馈。

---

最后更新: 2025年11月`
		}
	}
}
</script>

<style>
.share-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #F0F7FF;
}

.content {
	flex: 1;
	padding: 24rpx;
}

.doc-content {
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(91,155,213,.1);
}

.doc-text {
	font-size: 26rpx;
	color: #4A6FA5;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-all;
	display: block;
}
</style>

